<script>
export default {
  data() {
    return {
      tableData: [        // 重复的项目数据可以通过后端接口获取后填充在这里
      ],
      form:{},
      total:0,
      current:1,
      pageSize:5,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.findAll()
    },

  },
  created() {
    this.findAll()
  }
};
</script>
<template>
  <div align="left" class="c">
    <router-view/>
    <el-container>
      <el-header> |  服务项目管理</el-header>
      <el-main>
        <el-row>
          <el-col style="background-color: #F2F7FB" :span="3">
            <el-select v-model="form.xmlx" placeholder="请选择项目类型">
              <!-- 这里可以根据实际情况添加项目类型选项 -->
              <el-option label="全部" :value="null"></el-option>
              <el-option label="免费项目" value="免费项目"></el-option>
              <el-option label="收费项目" value="收费项目"></el-option>
            </el-select>
          </el-col>
          <el-col style="background-color: #F2F7FB" :span="3">
            <el-input v-model="form.name" placeholder="请输入关键字"></el-input>
          </el-col>
          <el-col style="background-color: #F2F7FB" :span="3">
            <el-button type="primary" @click="findAll">查询</el-button>
          </el-col>
          <el-col style="background-color: #F2F7FB" :span="13" align="right">
            <el-button type="primary" @click="save">新增服务项目</el-button>
          </el-col>
        </el-row>
        <el-table
            :data="tableData"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="项目编号">
          </el-table-column>
          <el-table-column
              prop="name"
              label="项目名称">
          </el-table-column>
          <el-table-column
              label="次数">
            <template slot-scope="scope">
              {{ scope.row.num }} 次
            </template>
          </el-table-column>
          <el-table-column
              prop="xmlx"
              label="项目类型">
            <!--            <template slot-scope="scope">-->
            <!--              {{ scope.row.sex == 0 ? '男' : '女' }}-->
            <!--            </template>-->
          </el-table-column>
          <el-table-column
              prop="xmjs"
              label="项目介绍">
          </el-table-column>
          <!--          <el-table-column-->
          <!--              prop="birthday"-->
          <!--              label="生日">-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--              prop="rname"-->
          <!--              label="宿舍号">-->
          <!--          </el-table-column>-->

          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="doUpdate(scope.row)">编辑</el-button>
              <el-button type="primary" @click="batchDeleteByIds('one',scope.row.id)">删除</el-button>
            </template>

          </el-table-column>


        </el-table>

      </el-main>


      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-size="pageSize">
      </el-pagination>


    </el-container>
  </div>
</template>

<style >
.c{
  background-color: #F2F7FB;
  border: 1px solid #d3dce6;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  width: 90%;
  height: 90%;
  overflow: auto;
}
</style>

